<template>
  <el-button-group>
    <el-button :type="device.online && allPower(device) ? 'primary' : ''"
      v-on:click="handleChange(device,0,!allPower(device))" class="light-button" :disabled="!device.online">
      <i class="el-icon-switch-button pramary" />
      {{ nameByDevice(device) || $t('All')}}
    </el-button>
    <el-button :type="device.online && device.power1 ? 'primary' : ''"
      v-on:click="handleChange(device,1,!device.power1)" class="light-button" :disabled="!device.online">
      <i class="el-icon-switch-button pramary" />
      {{device.light1}}
    </el-button>
    <el-button :type="device.online && device.power2 ? 'primary' : ''"
      v-on:click="handleChange(device,2,!device.power2)" class="light-button" :disabled="!device.online">
      <i class="el-icon-switch-button pramary" />
      {{device.light2}}
    </el-button>
    <el-button :type="device.online && device.power3 ? 'primary' : ''"
      v-on:click="handleChange(device,3,!device.power3)" class="light-button" :disabled="!device.online">
      <i class="el-icon-switch-button pramary" />
      {{device.light3}}
    </el-button>
  </el-button-group>
</template>
<script>
  import ItemController from "./ItemController";
  import {
    nameByDevice
  } from '@/views/device/common'
  export default {
    name: "LightItem",
    mixins: [ItemController],
    data() {
      return {
        light1: null,
        light2: null,
        light3: null,
        powerAll: false,
        power1: false,
        power2: false,
        power3: false,
      }
    },
    methods: {
      nameByDevice,
      allPower(device) {
        return device.power1 && device.power2 && device.power3
      },
      setDevice(device) {
        var lightName = []
        if (device.name) {
          lightName = device.name.split("|");
          if (lightName.length >= 3) {
            device.light1 = lightName[0];
            device.light2 = lightName[1];
            device.light3 = lightName[2];
          } else {
            device.light1 = device.name + '1';
            device.light2 = device.name + '2';
            device.light3 = device.name + '3';
          }
        } else {
          device.light1 = '1';
          device.light2 = '2';
          device.light3 = '3';
        }
        const json = device.map
        if (!json) {
          return
        }
        if (device.code.indexOf('LIGHT_RELAY3') >= 0) {
          if (json.POWER1) {
            device.power1 = json.POWER1 === 'ON'
          }
          if (json.POWER2) {
            device.power2 = json.POWER2 === 'ON'
          }
          if (json.POWER3) {
            device.power3 = json.POWER3 === 'ON'
          }
        } else if (device.code.indexOf('BleGate_') >= 0) {
          device.power1 = json.Light1 === 'ON'
          device.power2 = json.Light2 === 'ON'
          device.power3 = json.Light3 === 'ON'
        } else {
          console.warn('lamp code is not start with LIGHT_RELAY3 & BleGate : ', device)
        }
      },
      handleChange(device, key, state) {
        var code = device.code
        var command = null
        var content = state ? 'ON' : 'OFF'
        const names = [this.$t('All'), '1', '2', '3']
        var action = names[key] + ' ' + this.$t(state ? 'On' : 'Off')
        if (code.indexOf("LIGHT_RELAY3_") >= 0) {
          command = "power" + key;
        } else if (code.indexOf("485_RELAY3_") >= 0) {
          command = "" + key;
          content = state ? "1" : "0"
        } else if (code.indexOf("BleGate_") >= 0) {
          // code = code.split("@")[0]
          command = 'control'
          var message = {}
          message['Light' + key] = content
          if (key === 0) {
            message = {
              "Light1": content,
              "Light2": content,
              "Light3": content
            }
          }
          const data = {
            "PackageType": 0,
            "DeviceControl": {
              "DevMac": code.split("@").pop(),
              "Message": message
            }
          }
          content = JSON.stringify(data)
        }
        this.doCommand(code, command, content, action);
      }
    }
  }

</script>
<style scoped>
  .light-button {
    width: 100px;
  }

</style>
